<template>
    <div class="image-info-container">
        <div class="image-container">
            <img class="round-image" :src="item.avatar" />
        </div>
        <div class="info-container">
            <div class="title" v-if="type !== 'agreement'">来自<span class="highlight">{{ item.nickname }}</span>对宠物<span
                    class="highlight">{{ item.name }}</span>的领养申请</div>
            <div class="title" v-else>与用户<span class="highlight">{{ item.adaptername }}</span>关于宠物<span
                    class="highlight">{{ item.petname }}</span>的协议</div>
            <div class="approvalTag" v-if="type !== 'agreement'">
                <div class="info-line"><van-tag size="medium" plain type="primary">{{ item.age }}</van-tag></div>
                <div class="info-line"><van-tag size="medium" plain type="primary">{{ item.maritalStatus }}</van-tag>
                </div>
                <div class="info-line"><van-tag size="medium" plain type="primary">{{
                item.hasExperience ? '养宠经验丰富' : '无养宠经历' }}</van-tag></div>
            </div>
            <div class="approvalTag" style="margin: 15px; height: 15px;" v-else>
            </div>
            <div class="info-status" v-if="type !== 'agreement'">
                <van-tag size="large"
                    :type="item.status == 0 ? 'warning' : item.status == 1 ? 'success' : 'danger'">{{ item.status == 0 ? '待审核' : item.status == 1 ? '已通过' : '已拒绝' }}</van-tag>
            </div>
            <div class="info-status" v-else>
                <van-tag size="large"
                    :type="!state.showtype ? 'warning' : 'success'">{{ !state.showtype  ? '待签署' : !(item.status ==2)?'已签署':'已完成'}}</van-tag>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { reactive, onMounted } from 'vue';
import { userStore } from '@/store';
const { userInfo } = userStore();
const state = reactive({
    showtype: false
})
const props = defineProps({
    item: {
        type: Object,
        required: true,
    },
    type: {
        type: String,
        required: true
    }
})
onMounted(() => {
    if (props.item.sender_id == userInfo.user_id && props.item.sender_sign || props.item.adapt_id == userInfo.user_id && props.item.adapt_sign) {
        state.showtype = true;
    }

})



</script>

<style lang='less' scoped>
.image-info-container {
    display: flex;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #ede5e5;
}

.image-container {
    width: 20%;
}

.round-image {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-left: 5px;

}

.info-container {
    position: relative;
    width: 80%;
    box-sizing: border-box;
    padding-top: 2%;
    /* 根据需要调整间距 */
}

.title {
    font-size: 1.1rem;
    overflow: hidden;
    width: 100%;
    height: 1.5rem;
}

.highlight {
    color: rgba(109, 161, 201, 0.737);
    font-weight: 700;
}

.approvalTag {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.info-status {
    position: absolute;
    right: 5px;
    bottom: 0;
}
</style>
